<template>
<div>
    <el-breadcrumb separator="/">
         <el-breadcrumb-item >我的项目管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div >
        <el-row>
        <el-col class="boss-x">
            <div class="zuobian">
                <span>班级选择</span>
            <div class="block">
            <el-cascader
                v-model="form"
                :options="options3"
                @change="handleChange1"></el-cascader>
            </div>
            </div>
             <div class="youbian">
                <span>项目类别</span>
            <div class="block" prop>
            <el-cascader
                v-model="form"
                :options="options"
                @change="handleChange2"></el-cascader>
            </div>
            </div>
            
        </el-col>
    </el-row>
    </div>

    <!-- 日历 -->
    <!-- <el-row>
        <el-col>
            <div class="flex">
        <div>
            <span>弹出框</span>
            <input type="text" @click="openByDrop($event)" v-model="calendar3.display" readonly>
            <input type="text" @click="openByDialog" :value="calendar4.display" readonly>
        </div>

        <div>
            <span>单选/英文/事件</span>
            <calendar :events="calendar1.events" :lunar="calendar1.lunar" :value="calendar1.value" :begin="calendar1.begin" :end="calendar1.end" :weeks="calendar1.weeks" :months="calendar1.months" @select="calendar1.select"></calendar>
        </div>

        <div>
            <span>多选/农历</span>
            <calendar :range="calendar2.range" :lunar="calendar2.lunar" :value="calendar2.value" :begin="calendar2.begin" :end="calendar2.end" @select="calendar2.select"></calendar>
        </div>
    </div>

    <transition name="fade">
    <div class="calendar-dropdown" :style="{'left':calendar3.left+'px','top':calendar3.top+'px'}" v-if="calendar3.show">
        <calendar :zero="calendar3.zero" :lunar="calendar3.lunar" :value="calendar3.value" :begin="calendar3.begin" :end="calendar3.end" @select="calendar3.select"></calendar>
    </div>
    </transition>

    <transition name="fade">
    <div class="calendar-dialog" v-if="calendar4.show">
        <div class="calendar-dialog-mask" @click="closeByDialog"></div>
        
        <div class="calendar-dialog-body">
            <calendar :range="calendar4.range" :zero="calendar4.zero" :lunar="calendar4.lunar" :value="calendar4.value"  @select="calendar4.select"></calendar>
        </div>
        
    </div>
    </transition>
        </el-col>
    </el-row> -->
    
    <el-row>
        <el-col>
        <el-table
        :data="userlist.slice((page-1)*pageSize,pageSize*page)"
        style="width:100%"
        class="tableinfo margintop20"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        stripe
        >

        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="项目名称" prop="title"></el-table-column>
        <el-table-column label="项目地址" prop="lianjie"></el-table-column>
        <el-table-column label="项目类别" prop="category"></el-table-column>
        <el-table-column label="项目描述" prop="miaoshu"></el-table-column>
        <el-table-column label="项目技术" prop="jishu"></el-table-column>
        <el-table-column label="难点亮点" prop="nandian"></el-table-column>
        <el-table-column label="得分" sortable></el-table-column>
        </el-table>
        <div class="tan">
         <el-pagination
            background
            layout="prev,pager,next"
            :total="total"
            @current-change='changecurrent'
            :page-size="pageSize"
            :current-page="page"
            >

         </el-pagination>
        <span>共 {{total}} 条数据</span>
        </div>
    
    </el-col>
    
    </el-row>

</div>
    

</template>

<script>
import {xiangmucatetory,banjicatetory} from "@/utils"
import {getxiangmulist,delxiangmuAjax,updatexiangmu,getXMlist} from "@/api"
import Vue from "vue"
export default {
    name:"userlist",
    data(){
        return{
            userlist:[],
            pageSize:6,
            page:1,
            form:{},
            dialogVisible:false,
            options:xiangmucatetory,
            options3:banjicatetory,
            rules:{
                
            }
        }
    },
    computed:{
        total(){
            return this.userlist.length
        }
    },
    mounted(){
        getxiangmulist()
        .then(res=>{
            if(res.type){
                this.$nextTick(()=>{
                    this.userlist = res.result
                })
            }
        })
    },
    methods:{
        updateById(){
            this.$refs.myform.validate(valid=>{
                if(valid){
                    console.log(this.form)
                    updatexiangmu(this.form)
                    .then(res=>{
                        this.dialogVisible =false
                        this.userlist.forEach((item,i) => {
                            if(item._id==this.form._id) {
                                Vue.set(this.userlist,i,this.form)
                            }
                        });
                        
                    }).catch(err=>{

                    })
                }else{
                    return false
                }
            })
        },
        updateone(row){
            this.dialogVisible=true
            // this.form = row
            this.form = {...this.form,...row}

        },
        handleClose(){
            this.dialogVisible=false
        },
        changecurrent(current){
            this.page = current
        },
        handleChange1(){

        },
        handleChange2(){
            console.log(this.form[0])
            // getXMlist(this.form[0])
            // .then(res=>{
            //      if(res.type){
            //             this.$nextTick(()=>{
            //                 this.userlist = res.result
            //             })
            //      }
            // })
            // .catch(err=>{

            // })

        },
        delxiangmu(row){
            console.log(row)
            var roleid = sessionStorage.getItem("roleid")
            delxiangmuAjax({
                _id:row._id
            })
            .then(res=>{
                if(res.type){
                    this.userlist=this.userlist.filter(item=>item._id!==row._id)
                }
            }).catch(err=>{

            })
        }
    }
}
</script>


<style lang="scss" scoped>
   .boss-x{
       display: flex;
       align-items: center;
       margin-top: 20px;
       .zuobian{
             display: flex;
             align-items: center;
             margin-right: 50px;
             span{
                 margin-right: 20px;
             }
       }
        .youbian{
             display: flex;
             align-items: center;
             span{
                 margin-right: 20px;
             }
       }
   }
</style>